<template>
  <el-dialog
    v-model="dialogVisible"
    title="2323223"
    width="400px"
    :close-on-click-modal="false"
    :show-close="true"
    @close="handleClose"
    class="quick-answer-result"
  >
    <div class="result-content">
      <div class="status-text">已结束</div>
      <div class="avatar-section">
        <el-avatar :size="64" src="path/to/avatar.png">林林</el-avatar>
        <div class="user-name">林林 666666666</div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['close'])

const dialogVisible = ref(true)

const handleClose = () => {
  emit('close')
}
</script>

<style scoped>
.quick-answer-result {
  :deep(.el-dialog) {
    background-color: white;
    border-radius: 8px;
  }

  :deep(.el-dialog__header) {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
  }

  :deep(.el-dialog__body) {
    padding: 30px 20px;
  }
}

.result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.status-text {
  color: #ff4d4f;
  font-size: 14px;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.user-name {
  font-size: 14px;
  color: #333;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  padding: 10px 20px;
  border-top: 1px solid #eee;
}
</style> 